<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-table td, .layui-table th {
            min-width: 60px;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">财务</a>
            <a href="javascript:;">项目生活费</a>
            <a>
                <cite>项目充值账簿</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right;margin-right:10px"
       onclick="window.history.go(-1)" title="后退">
        <i class="iconfontBlod" style="line-height:30px">&#xe74f;</i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form livingList">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="">
                                <label class="layui-form-label">日期</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="startTime" placeholder="">
                                </div>
                                <div class="layui-input-block" style="width:10px;text-align: center">
                                    -
                                </div>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="endTime" placeholder="">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索</label>
                                <div class="layui-input-block">
                                    <input type="search" autocomplete="off" class="layui-input" id='searchInput'>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn search" type="button" id='search'>
                                    <i class="iconfont layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type='text/html' id='toolbar'>
    <button class="layui-btn" type="button" auth="addBook" lay-event="add">添加</button>
</script>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;

        laydate.render({
            elem: '#startTime'
            , type: 'date'
            , value: ''
            , max: 0
        });
        laydate.render({
            elem: '#endTime'
            , type: 'date'
            , value: ''
            , max: 0
        });
        var projectId = getQueryString('projectId');
        // 异步数据加载
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/finance/living/rechargeBookLists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count": res.data.count
                };
            },
            where: {
                projectId: projectId,
                startTime: $('#startTime').val(),
                endTime: $('#endTime').val(),
                search: "",
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            page: true, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    {field: '', title: '编号', type: 'numbers', width: '4%', totalRowText: '合计借款：'},
                    {field: 'name', title: '册次名称'},
                    {
                        field: 'account', title: '册次总金额', width: '8%', templet(d) {
                            return numberFormat(Number(d.account),'currency');
                        }
                    },
                    {
                        field: 'accountSum', title: '录入总金额', width: '8%', 'totalRowText': '读取中...', templet: function (d) {
                            return numberFormat(Number(d.accountSum),'currency');
                        }
                    },
                    {
                        field: 'check', title: '差额验证', width: '8%', templet: function (d) {
                            var result = Number(d.account) - Number(d.accountSum);
                            if (result === 0) {
                                return result;
                            } else {
                                return `<span style="color:#FF5722;font-weight: 700">${numberFormat(result,'currency')}</span>`
                            }
                        }
                    },
                    {field: 'remark', title: '备注'},
                    {
                        field: 'createTime', title: '创建时间', width: '8%', templet: function (d) {
                            return (d.createTime).substr(0, 10);
                        }
                    },
                    {field: 'adminName', title: '录入人', width: '6%'},
                    {
                        field: 'status', title: '册次状态', width: '7%', templet: function (d) {
                            switch(d.status){
                                case 2:
                                    return '审核中';
                                case 3:
                                    return '封存';
                            }
                        }
                    },
                    {
                        field: '', title: '操作', width: '22%', templet(d) {
                            var html = `<button class='layui-btn' lay-event="info" data-id=${d.id}>账目明细</button>`;
                            if(d.status !== 3){
                                html+=`<button class='layui-btn' auth="mothballBook" lay-event="mothball" data-id=${d.id}>册次封存</button>
                                        <button class='layui-btn layui-btn-danger' auth="deleteBook" lay-event="delete" data-id=${d.id}>删除册次</button>
                                        `
                            }
                            return html;
                        }
                    }
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            totalRow: false,
            done: function () {
                // totalRow();
                permission();
            }
        });
        table.on('tool(test)', function (data) {
            if (data.event === 'mothball'){
                var id = data.data.id;
                var result = Number(data.data.account) - Number(data.data.accountSum);
                var check = formatNum(result.toString());
                layer.open({
                    type: 0,
                    title: "封存册次",
                    area: ['40%', '30%'],
                    content: `请确认是否封存此充值册次（${data.data.name}）,录入金额与册次总额差额为：<span style="color:#FF5722;font-weight: 700">${check}</span>元`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + "/finance/living/mothball",
                            type: "POST",
                            async: false,
                            data: {
                                id: id,
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('封存册次', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('封存册次', r);
                                }
                            }
                        })
                    }
                })
            } else if (data.event === 'info') {
                var id = data.data.id;
                window.location.href = 'projectLivingBookDetail.html?bookId=' + id+'&projectId='+projectId;
            } else if (data.event === 'delete') {
                var id = data.data.id;
                var id = data.data.id;
                layer.open({
                    type: 0,
                    title: "删除",
                    area: ['40%', '30%'],
                    content: `请确认是否删除此充值册次`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + "/finance/living/deleteBook",
                            type: "POST",
                            async: false,
                            data: {
                                id: id,
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('删除册次', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('删除册次', r);
                                }
                            }
                        })
                    }
                })
            }
        });

        table.on('toolbar(test)', function (data) {
            if (data.event === 'add') {
                layer.open({
                    type: 1,
                    title: "充值册次",
                    area: ['40%', 'auto'],
                    content: `
                    <form class='layui-form layerOpen'>
                        <div class="layui-item">
                            <div class='layui-inline'>
                                <label class="layui-form-label">册次名称</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="name" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class='layui-inline'>
                                <label class="layui-form-label">册次总金额</label>
                                <div class="layui-input-block">
                                    <input type="number" class="layui-input" min="0" step="0.01" name="account">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class='layui-inline'>
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="remark">
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success: function () {
                        laydate.render({
                            elem: 'input[name=startTime]'
                            , type: 'date'
                            , value: ''
                            , max: 0
                        });
                        laydate.render({
                            elem: 'input[name=endTime]'
                            , type: 'date'
                            , value: ''
                            , max: 0
                        });
                    },
                    yes: function (index, layero) {
                        var name = $('input[name=name]').val();
                        var account = $('input[name=account]').val();
                        var startTime = $('input[name=startTime]').val();
                        var endTime = $('input[name=endTime]').val();
                        var remark = $('input[name=remark]').val();
                        $.ajax({
                            url: url + "/finance/living/addRechargeBook",
                            type: "POST",
                            async: false,
                            data: {
                                projectId: projectId,
                                name: name,
                                account: account,
                                // startTime: startTime,
                                // endTime: endTime,
                                remark: remark,
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('充值册次', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('充值册次', r);
                                }
                            }
                        })
                    }
                })
            }
        });
        //搜索
        $('body').on('click', '#search', function () {
            var search = $(this).parent().prev().find('input').val();
            table.reload('lists', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    projectId: projectId,
                    token: getToken(),
                    search: search,
                    startTime: $('#startTime').val(),
                    endTime: $('#endTime').val(),
                }
            })
        });
    })
</script>
</html>